<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物网站 - 首页</title>
  <link rel="stylesheet" href="./css/home.css">
  <script src="./js/home.js"></script>
  <style>
    /* 重置默认样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 30px;
      color: #333;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 10px;
    }

    nav ul li button {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    nav ul li button.active,
    nav ul li button:hover {
      background-color: blue;
      color: white;
    }

    nav ul li button.active:hover {
      background-color: blue;
    }

    nav ul li button:not(.active):hover {
      background-color: blue;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a:hover {
      background-color: #e6e6e6;
    }

    main {
      text-align: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }

    .cta-button {
      display: inline-block;
      padding: 12px 24px;
      background-color: #333;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .cta-button:hover {
      background-color: #666;
    }

    footer {
      text-align: center;
      color: #999;
      font-size: 14px;
    }



    /*  */
    /* 左中右结构的商品列表样式 */
    .product {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .product-image {
      width: 180px;
      height: 100px;
      margin-right: 10px;

      object-fit: cover;
      /* 图片尽量填充整个容器 */
      object-position: center;
      /* 图片居中显示 */
    }

    .product-middle {
      flex-grow: 1;
    }

    .name-description {
      margin-bottom: 5px;
    }

    .product-price {
      font-weight: bold;
      margin-right: 8px;
      /* 添加价格标签与其他元素之间的下边距 */
    }




    /* 购买链接样式 */
    /* 购买按钮样式 */
    .product .buy-button {
      display: inline-block;
      padding: 8px 16px;
      background-color: #3498db;
      color: #fff;
      text-decoration: none;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin-bottom: 8px;
      margin-left: 8px;
      /* 添加购买按钮与其他元素之间的上边距 */
    }

    .product .buy-button:hover {
      background-color: #2980b9;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 头部导航栏 -->
    <header>
      <h1>购物网站</h1>
      <nav>
        <ul>
          <li><button class="active" type="button" onclick="handleButtonClick(0)">推荐</button></li>
          <li><button type="button" onclick="handleButtonClick(1)">衣物</button></li>
          <li><button type="button" onclick="handleButtonClick(2)">食品</button></li>
          <li><button type="button" onclick="handleButtonClick(3)">化妆品</button></li>
          <li><button type="button" onclick="handleButtonClick(4)">电子产品</button></li>
          <li><button type="button" onclick="handleButtonClick(5)">生活用品</button></li>
        </ul>
      </nav>

      <nav>
        <ul>
          <li><a href="cart.html">购物车</a></li>
          <li><a href="Personal.html">个人主页</a></li>
        </ul>
      </nav>

    </header>
    <!-- 主要内容区域 -->
    <main>
      <div id="dynamicDiv">
        <!-- 动态展示区 -->
      </div>
      <h2>欢迎来到购物网站</h2>
      <p>在这里，您可以发现各种精彩商品，并轻松进行购买。</p>
      <p>我们提供高品质的产品和卓越的服务，让您的购物体验愉快和便捷。</p>
      <p>开始您的购物之旅吧！</p>
      <a href="#" class="cta-button">开始购物</a>
    </main>

    <!-- 底部版权信息 -->
    <footer>
      <p>&copy; 2023 购物网站. All rights reserved.</p>
    </footer>
  </div>

  <!-- 这样才可以发送ajax请求 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>


    //==========================================================
    //=======================商品展示============================
    //==========================================================

    //进入首页默认展示推荐页面
    // 进入首页默认展示推荐页面
    var index = 0;
    var urlParams = new URLSearchParams(window.location.search);
    var indexParam = urlParams.get('index');
    if (indexParam !== null) {
      index = parseInt(indexParam);
    }

    //===========================================================
    //=======================按钮特效=============================
    //===========================================================
    // 获取所有按钮元素
    document.addEventListener('DOMContentLoaded', function () {
      const buttons = document.querySelectorAll('nav ul li button');
      // const index = 2; // 假设传递的参数为2，表示激活第3个按钮（索引从0开始）

      // 移除所有按钮的 active 类名
      buttons.forEach(btn => btn.classList.remove('active'));

      // 设置第index个按钮为蓝色
      if (index >= 0 && index < buttons.length) {
        buttons[index].classList.add('active');
      }

      // 按钮点击事件处理
      buttons.forEach((button, i) => {
        button.addEventListener('click', function () {
          // 移除所有按钮的 active 类名
          buttons.forEach(btn => btn.classList.remove('active'));

          // 给当前点击的按钮添加 active 类名
          this.classList.add('active');
        });
      });
    });
    handleButtonClick(index);

    //动态生成商品列表
    function handleButtonClick(index) {
      jQuery.ajax({
        url: "home_index",
        type: "GET",
        data: {
          "index": index,
        },
        success: function (response) {
          var productsList = response.data; // 商品列表数据

          var dynamicDiv = jQuery("#dynamicDiv");
          dynamicDiv.empty(); // 清空商品列表容器

          // 动态生成商品列表
          for (var i = 0; i < productsList.length; i++) {
            var product = productsList[i];

            // 创建商品元素
            var productDiv = jQuery("<div>");
            productDiv.addClass("product");

            // 左部分 - 商品图片
            var imageElement = jQuery("<img>");
            imageElement.attr("src", product.image_url);
            // imageElement.attr("src", './image/Product_img/001.jpg');
            imageElement.addClass("product-image");

            // 中部分 - 商品名称和描述
            var middleDiv = jQuery("<div>");
            middleDiv.addClass("product-middle");

            var nameElement = jQuery("<h3>").text(product.name);
            var descriptionElement = jQuery("<p>").text(product.productDescription);
            var nameDescriptionDiv = jQuery("<div>");
            nameDescriptionDiv.addClass("name-description");
            nameDescriptionDiv.append(nameElement);
            nameDescriptionDiv.append(descriptionElement);
            middleDiv.append(nameDescriptionDiv);

            // 右部分 - 商品价格
            var priceElement = jQuery("<p>").text("价格: " + product.price);
            priceElement.addClass("product-price");

            // 创建购买按钮
            var buyButton = jQuery("<button>");
            buyButton.text("添加至购物车"); // 设置购买按钮文本
            buyButton.addClass("buy-button"); // 添加购买按钮的类
            buyButton.attr("data-pid", product.pid); // 存储商品ID到按钮的自定义属性

            // 绑定购买按钮的点击事件
            buyButton.click(function () {
              var pid = jQuery(this).data("pid"); // 获取商品ID
              // alert("购买商品ID为：" + pid);
              // 这里可以执行购买商品的相关操作，例如跳转到购买页面
              $.ajax({
                type: 'POST',
                url: 'purchase',
                data: {
                  pid: pid
                },
                success: function (body) {
                  if (body.code == 200) {
                    window.location.href = 'cart.html?pid=' + pid;
                  } else {
                    alert("添加失败")
                  }
                },
                error: function () {
                  console.error('Error: Login request failed');
                }
              });

            });

            // 将各部分添加到商品元素
            productDiv.append(imageElement);
            productDiv.append(middleDiv);
            productDiv.append(priceElement);
            productDiv.append(buyButton); // 添加购买按钮

            // 将商品元素添加到商品列表容器
            dynamicDiv.append(productDiv);
          }
        }
      });
    }





  </script>
</body>

</html>